<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="人员管理"></u-navbar>
		<d-select :options="options" @query="searchData"></d-select>
		<view class="d-p-30">
			<view class="card d-p-30">
				<view class="d-flex d-m-b-30"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">人员信息</view></view>
				<memberChart :count="count"></memberChart>
			</view>

			<view class="card d-p-30 d-m-t-20" @click="member" v-if="staffs">
				<view class="d-flex d-m-b-30"><view class="sub-title d-font-30 d-flex-1" style="color: #0882F3;">人员概览</view></view>
				<view class="d-flex d-font-24 d-m-t-20" v-if="queryParams.districtId">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">区划</view>
						<view class="d-flex-1" style="color: #162233;">{{ quhua() }}</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">实名制人数</view>
						<view style="color: #162233;">{{ staffs.smrztaffs || 0 }} 人</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">项目管理人数</view>
						<view style="color: #162233;">{{ staffs.sglrytaffs || 0 }} 人</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-20" style="color: #5D6672;">务工人数</view>
						<view style="color: #162233;">{{ staffs.swgrytaffs || 0 }}人</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">进场人数</view>
						<view style="color: #162233;">{{ staffs.istaffs || 0 }}人</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20">
					<view class="d-flex" style="flex: 3;">
						<view class="d-m-r-20" style="color: #5D6672;">项目管理人数</view>
						<view style="color: #162233;">{{ staffs.jglrytaffs || 0 }}人</view>
					</view>
					<view class="d-flex" style="flex: 2;">
						<view class="d-m-r-20" style="color: #5D6672;">务工人数</view>
						<view style="color: #162233;">{{ staffs.jwgrytaffs || 0 }}人</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { appNation, staffsdistribute, staffsStatistics } from '../../../common/api.js';
import memberChart from '../components/memberChart.vue';
export default {
	components: {
		memberChart
	},
	data() {
		return {
			options: [],
			count: null,
			queryParams: {},
			staffs: null
		};
	},
	onLoad() {
		this.queryParams = {
			districtId: this.$user.districtId
		};
		appNation().then(e => {
			this.options = [
				{
					label: '属地',
					name: 'districtId',
					noall: true,
					default: this.$user.districtId, // 手动默认  不然就加载两次
					children: e.data.map(e => {
						return {
							id: e.districtId,
							label: e.districtName
						};
					})
				}
			];
		});
		this.init();
	},
	watch: {
		'queryParams.districtId': {
			deep: true,
			immediate: true,
			handler(v) {
				console.log(v);
			}
		}
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			staffsdistribute({
				params: {
					deptId: this.$user.deptId,
					districtId: this.$user.districtId, // 默认值
					...this.queryParams
				}
			})
				.then(e => {
					this.count = e.data;
				})
				.then(() => {
					return staffsStatistics({
						params: {
							deptId: this.$user.deptId,
							districtId: this.$user.districtId, // 默认值
							...this.queryParams
						}
					});
				})
				.then(e => {
					this.staffs = e.data;
				})
				.then(() => {
					uni.hideLoading();
				});
		},
		searchData(e) {
			this.queryParams = e;
			this.init();
		},
		member() {
			uni.$u.route({
				url: '/pages/index/member/member',
				params: {
					districtId: this.$user.districtId, // 默认值
					...this.queryParams
				}
			});
		},
		quhua() {
			try {
				let item = this.options[0].children.filter(i => {
					return i.id == this.queryParams.districtId;
				});
				console.log(item[0].label);
				return item[0].label;
			} catch (e) {
				return '加载错误';
			}
		}
	}
};
</script>

<style lang="scss">
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
	.tag {
		height: 32rpx;
		background: #ffb61d;
		border-radius: 4rpx;
		color: #ffffff;
		font-size: 20rpx;
		padding: 0 10rpx;
	}
}
page {
	background-color: #fbfcfc;
}
</style>
